<template>
	<view>
		<view class="userMain">
			<image class="userImage" :src="shareIdDetail.avatar" />
			<view class="userNames">
				<view class="title">{{shareIdDetail.faultName}}</view>
				<view class="titleDetails">
					<text class="userName">{{shareIdDetail.nickname}}</text>
					<view class="times">
					
						<u-icon name="calendar-fill"></u-icon>
						<text class="time">{{ shareIdDetail.createTime }}</text>
					</view>
					<view class="times">
						<!-- <image class="tipsImage"
							src="https://www.hifini.com/upload/attach/201901/1_ANM4Q7ZNPR27EZM.png"></image> -->
						<u-icon name="eye-fill"></u-icon>

						<text class="time">{{shareIdDetail.browses}}</text>
					</view>
				</view>
			</view>
			<view class="">
				<u-button type="primary" size="mini" shape="square" v-show="!follow" @click="clickFollow">关注</u-button>
				<u-button type="primary" size="mini"  shape="square" v-show="follow" @click="clickFollowCancel" >取消关注</u-button>
			</view>
		</view>
		<view class="mian">
			<view class="linkTitle">故障名称：{{shareIdDetail.faultName}}</view>
			<view class="linkTitle">故障现象描述：{{shareIdDetail.faultDesc}}</view>
			<view class="linkTitle">机组型号：{{shareIdDetail.unitType}}</view>
			<view class="linkTitle">部件部位：{{shareIdDetail.componentParts}}</view>

			<view class="txtAll">
				<u-parse :html="shareIdDetail.content" :domain="domain"></u-parse>
			</view>


			<view class="detail-comment">
				<view class="comment-title">
					评论区
				</view>
				<view class="comment-content">
					<view class="vfor" v-for="(item,index) in commentList" :key="index">
						<view class="item_wrap">
							<view class="ileft">
								<view class="avatar">
									<u-image width="70rpx" height="70rpx" shape="circle" :src="item.avatar"></u-image>
								</view>
								<view class="nick">
									<text>{{item.nickname}}</text>
								</view>
							</view>
							<view class="iright">
								<view class="likes" v-if="shareIdDetail.userId == userId">
									<u-tag text="采纳" type="info" v-if="item.isadopt != 1" @click="hasBeenAdopted(item)" shape="circle" />
								</view>
								<view class="likes" >
									<u-tag text="已采纳" type="success" v-if="item.isadopt == 1"  shape="circle" />
									<!-- <u-icon name="thumb-up" color="grey" size="40"></u-icon> -->
									<!-- <text>{{item.likes}}</text> -->
								</view>
							</view>
						</view>
						<view class="ccontent">
							{{item.content}}
						</view>
						<view class="" v-if="item.imgs != null && item.imgs != ''"  style="display: flex; flex-wrap: wrap; margin-left: 85rpx;">
							
							<view class="" style="margin: 10rpx;" @click="previewImg(item.imgs,indexs)" v-for="(items,indexs) in item.imgs" :key="index"  >
								<u-image width="150rpx" height="150rpx" :src="items"></u-image>
							</view>
						</view>
						<view class="reply" @click="openReply(item)">
							<text>{{item.replies}}回复</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="writeComments">
			<!-- <u-input v-model="writeContent" @click="showDialog = true" type="text" placeholder="写评论..." confirm-type="写评论" @confirm="writeComment"
				class="writeContent"></u-input> -->
			<view style="width: 50vw; height: 10vw; padding: 2vw;; border: 1px solid #CCCCCC; border-radius: 50vh;" @click="openWriteDialog">写评论...</view>
			<view class="shoucang">
				<u-icon name="thumb-up-fill" @click="clickCancelLikes" color="#3BA2FF" size="50"
					v-if="articleStatus.likes == 1"></u-icon>
				<u-icon name="thumb-up" @click="clickLikes" size="50" color="#3BA2FF"
					v-else-if="articleStatus.likes == 0">
				</u-icon>
			</view>
			<view class="zan">
				<u-icon name="star-fill" @click="clickCancelCollection" color="#3BA2FF"
					v-if="articleStatus.collections == 1" size="50"></u-icon>
				<u-icon name="star" @click="clickCollection" color="#3BA2FF" v-else-if="articleStatus.collections == 0"
					size="50"></u-icon>
			</view>
			<!-- <view @click="writeComment()" class="but" v-if="writeContent.length>0">发送</view> -->
			<view class="share" @click="openModel">
				<u-icon name="rmb-circle" color="#3BA2FF" size="50"></u-icon>
			</view>
			
		</view>
		<view :class="['dialogWrite',showDialog == true?'showDialogWrite':(howDialog == false?'hideDialogWrite':'')]" >
			<view @click="closeWrite" class="cloneDialogWrite">
				<view class="">
					评论框
				</view>
				<image class="img" src="../../static/images/close.png" mode=""></image>
			</view>
			<view class="" style="padding: 0 30rpx 30rpx 30rpx;">
				<textarea class="textarea" v-model="writeContent" placeholder="请输入内容" />
			</view>
			
			<view class="imageMain">
				<view v-for="(item,index) in imageList" class="image">
					<image class="photo" :src="item" mode="aspectFill"></image>
					<image class="clone" src="../../static/images/close.png" @click="delImage(index)" mode=""></image>
					<!-- <view class="clone" @click="delImage(index)"></view> -->
				</view>
				<view @click="selectImage" class="imageAdd">
						<u-icon name="plus" color="#fff" size="50"></u-icon>
				</view>
			</view>
			<view class="but" @click="writeComment()" v-if="writeContent.length || imageList.length">发送</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="show" @confirm="confirm" show-cancel-button="true" title="打赏">
			<view class="slot-content">
				<u-form :model="form" ref="uForm" label-width="150">
					<u-form-item label="打赏金额" prop="money">
						<u-input :border="border" :type="type" v-model="form.money" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'number',
				border: true,
				rules: {
					money: [{
							required: true,
							message: '请输入打赏金额',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.digits(value)
							},
							message: '请输入整数',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				show: false,
				form: {
					money: 10,
				},

				url: this.baseUrl,
				domain: this.domain,
				shareId: '',
				// 技术分享内容信息
				shareIdDetail: {},
				// 文章 点赞 收藏状态
				articleStatus: {},
				commentList: [], // 评论列表
				
				
				writeContent: '',
				showDialog:null,
				imageList: [], //图片列表
				imgList:[],
				userId:'',
				follow: 0 ,

			}
		},
		onLoad(event) {
			this.userId = this.$store.state.userinfo.id
			this.shareId = event.shareId
			this.getShareDetail();
			this.getCommentList()

		},
		methods: {
			// 关注
			clickFollow() {
				if(this.shareIdDetail.userId == this.userId){
					this.$u.toast("自己不能关注自己!");
					return false;
				}
				console.log(this.shareId,'this.shareId')
				this.$u.api.saveFollow({
						articleId: this.shareId,
						followId: this.shareIdDetail.userId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("关注成功");
						this.follow = 1
					});
			},
			// 取消关注
			clickFollowCancel() {
				this.$u.api.saveFollowCancel({
						articleId: this.shareId,
						followId: this.shareIdDetail.userId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("取消关注");
						this.follow = 0
					});
			},
			//  已采纳分配积分
			hasBeenAdopted(item){
				
				// 1.修改 评论信息为 已采纳
				this.$u.api.getCommentInfo({commentId:item.commentId}).then(res => {
					if(res.msg == '已分配积分'){
						uni.showToast({
							title: "已采纳信息，不能再分配！",
							duration: 2000,
							icon: 'none',
						});
						return;
					}else{
						// // 2. 保存 已采纳积分
						let param = {
							consumptionType: 1, // 新增积分
							consumptionNum: 10, //发帖增加10积分,
							consumptionDesc: 5, // 1代表签到，2代表发帖 3代表打赏，4代表评论奖励积分	5代表已采纳奖励
						}
						
						this.$u.api.saveUserIntegralConsumptions(param).then(res => {
							uni.showToast({
								title: "采纳成功，成功分配10积分！",
								duration: 2000,
								icon: 'none',
							});
							this.getCommentList()
						})
					}
				})
			},
			// 点击预览图片
			 previewImg(logourl,index) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = logourl[index]
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			// 关闭评论框
			closeWrite(){
				this.showDialog=false;
				this.writeContent= "";
				this.imageList= [];
				this.imgList= [];
			},
			// 弹出 评论框
			openWriteDialog(){
				this.showDialog=true;
				this.writeContent= "";
				this.imageList= [];
				this.imgList= [];
			},
			openModel() {
				this.show = true;
			},
			confirm() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 发帖保存积分
						let param = {
							consumptionType: 3, // 新增积分
							consumptionNum: this.form.money, //发帖增加10积分,
							consumptionDesc: 3, // 2代表发帖
							userId: this.shareIdDetail.userId,
						}
						// 打赏积分
						this.$u.api.exceptionalIntegral(param).then(res => {
							console.log(res,'msg')
							if(res.msg == '积分不足'){
								uni.showToast({
									title: "积分不足,请先获取积分！",
									duration: 2000,
									icon: 'none',
								});
							}else{
									uni.showToast({
										title: "打赏成功！",
										duration: 2000,
										icon: 'none',
									});
							}
							
						})

					}
				})
			},
			
			// 跳入子评论页面
			openReply(item) {
				uni.navigateTo({
					url: `/subpackage/industry_dynamic_detail/commentReply?cId=${item.commentId}&commentType=4`
				})
			},

			// 写评论
			writeComment() {
				// if (!this.$store.state.isLogin) return this.$u.toast("请登录");
				var login = this.checkLogin();
				if (!login) {
					return false;
				}
				if(this.writeContent == ""){
					this.$u.toast("请填写评论！");
					return;
				}
				let param = {
					articleId: this.shareId,
					content: this.writeContent,
					commentParentid: '0',
					commentType: 4,
					imgs:this.imgList.join(',')
				}
				this.$u.api.articleComments.saveWindComment(param)
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.writeContent = '';
						this.showDialog = false;
						this.imageList= [];
						this.imgList= [];
						this.getCommentList();
						
						// 发帖保存积分
						let param = {
							consumptionType: 1, // 新增积分
							consumptionNum: "5", //评论成功，获取5积分,
							consumptionDesc: 4, // 1代表签到，2代表发帖 3代表打赏，4代表评论奖励积分
						}
						
						this.$u.api.saveUserIntegralConsumptions(param).then(res => {
							
						})
						
						this.$refs.uToast.show({
							type: 'success',
							title: '评论成功'
						})
					});
			},
			// 点赞
			clickLikes() {
				//if (!this.$store.state.isLogin) return this.$u.toast("请登录");
				var login = this.checkLogin();
				if (!login) {
					return false;
				}
				this.$u.api.saveFaultLikes({
						articleId: this.shareId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("点赞成功");
						this.articleStatus.likes = 1
					});
			},
			// 取消点赞
			clickCancelLikes() {
				this.$u.api.saveLikesCancel({
						articleId: this.shareId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("取消点赞");
						this.articleStatus.likes = 0
					});
			},

			// 点击 收藏按钮
			clickCollection() {
				// if (!this.$store.state.isLogin) return this.$u.toast("请登录");
				var login = this.checkLogin();
				if (!login) {
					return false;
				}
				this.$u.api.saveFaultCollection({
						articleId: this.shareId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("收藏成功");
						this.articleStatus.collections = 1
					});
			},
			// 取消收藏
			clickCancelCollection() {
				this.$u.api.shareCollectionCancel({
						articleId: this.shareId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("取消收藏");
						this.articleStatus.collections = 0
					});
			},

			// 获取用户文章 所有点赞信息
			articleUserStatus() {
				this.$u.api.articleUserStatus({
						articleId: this.shareId,
						userId: this.shareIdDetail.userId
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.articleStatus = res.data
						this.follow = res.data.follow
						
					});
			},
			// 获取 技术分享信息内容
			getShareDetail() {
				this.$u.api.getShareDetailFault({
						shareId: this.shareId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.shareIdDetail = res.data
						this.articleUserStatus();
					});
			},
			// 获取 评论 list
			getCommentList() {
				this.$u.api.getPCommentsByArticleIdFault({
						articleId: this.shareId,
						type: 4,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						
							for(let i=0;i<res.rows.length;i++){
								if(res.rows[i].imgs != null){
									let array = res.rows[i].imgs.split(',')
									res.rows[i].imgs = array
								}
							}
							this.commentList = res.rows
						
					});
			},
			selectImage() {
				let _this = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						_this.imageList = _this.imageList.concat(res.tempFilePaths);
						
						uni.uploadFile({
							url: _this.baseUrl + "/common/upload",
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (fileRes) => {
								let data = JSON.parse(fileRes.data);
								var url = data.url;
								_this.imgList.push(url);
							},
							fail: (res) => {
								console.log(res);
							}
						});
					
					}
				});
			},
			delImage(index){
				this.imageList.splice(index,1)
				delete this.imgList[index];
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
		height: 100%;
	}

	.userMain {
		background: #dedede;
		display: flex;
		padding: 2vw;
	}

	.userImage {
		width: 10vw;
		height: 10vw;
		display: block;
		margin-right: 2vw;
	}

	.userNames {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 5vw;
		
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow:hidden;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
	}

	.titleDetails {
		color: #868e96;
		display: flex;
	}

	.userName {
		margin-right: 2vw;
	}

	.times {
		align-items: center;
		margin-right: 2vw;
		display: flex;
	}

	.tipsImage {
		width: 2.5vw;
		height: 2.5vw;
		display: block;
		margin-right: 0.5vw;
	}

	.time {}

	.mian {
		padding: 0 2vw;
	}

	.stateTrue {
		background-color: #d1e5d5;
		border-color: #bedbc4;
		color: #0c4218;
		padding: 2vw;
	}

	.stateFalse {
		border: 1px #f1c84c dashed;
		color: #7d6828;
		background-color: #fcf4db;
		padding: 2vw;
	}

	.insetImage {
		width: 100%;
		display: block;
		margin: 1vw 0vw;
	}

	.links {
		padding-bottom: 20px;
	}

	.linkTitle {
		margin: 3vw 0 1vw;
		border-left: 4px solid #6293d4;
		padding-left: 2vw;
	}

	.txtAll {
		margin: 4vw 0;
	}

	.reply {
		margin: 0 1vw;
		color: #1f4977;
	}

	.detail-comment {
		margin: 20rpx;

		// 评论区头
		.comment-title {
			font-size: 15px;
			padding: 10px 10px;
			border-bottom: 2px solid #000000;
		}

		// 评论区内容
		.comment-content {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			margin-bottom: 100rpx;

			.vfor {
				.item_wrap {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.ileft {
						display: flex;
						align-items: center;

						.avatar {
							margin-right: 15rpx;
						}

						.nick {
							text {
								font-weight: bold;
							}
						}
					}

					.iright {
						display: flex;

						.likes {
							margin-right: 10rpx;

							text {
								margin-left: 5rpx;
							}
						}

						.unlikes {
							text {
								margin-left: 5rpx;

							}
						}
					}
				}

				.ccontent {
					margin-left: 85rpx;
					font-size: 27rpx;
				}

				.reply {
					margin-left: 85rpx;
					margin-top: 20rpx;

					text {
						background-color: #F4F4F4;
						padding: 5rpx 50rpx 8rpx 20rpx;
						margin-right: -30rpx;
						border-radius: 20rpx;
						font-size: 27rpx;
					}
				}
			}
		}
	}

	.writeComments {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		width: 750rpx;
		height: 100rpx;
		align-items: center;
		background-color: #fff;
		border-top: 1rpx solid #eee;

		.writeContent {
			background-color: #f4f4f4;
			height: 60rpx;
			align-items: center;
			border-radius: 30rpx;
			padding-left: 50rpx !important;
			// width: 400rpx;
		}

		.write_warp {}

		.zan {
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.shoucang {
			width: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.share {
			button {
				background-color: rgba($color: #000000, $alpha: 0);
			}

			button:after {
				border: none;
			}
		}
		.but{
		  color: white;
		  background: #0089ff;
		  border-radius: 50vw;
		  height: 60rpx;
		  width: 120rpx;
		  line-height: 60rpx;
		  text-align: center;
		  margin-right: 5vw;
		 }
	}
	
	.dialogWrite{
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 0;
		left: 0;
		z-index: 999;
		background: white;
		box-sizing: border-box;
		box-shadow: 0px -4px 4px 0px #a7a7a7;
	
		
	}
	.cloneDialogWrite{
		
			display: flex;
			justify-content: space-between;
			border-top: 3px solid #CCCCCC;
		// position: absolute;
		// top: 1vw;
		// right: 1vw;
		padding: 4vw;
		font-size: 5vw;
		.img{
			width: 5vw;
			height: 5vw;
		}
	}
	.showDialogWrite{
		animation: mymove 2s forwards;
	}
	.hideDialogWrite{
		
		animation: mymove 2s forwards alternate;
	}
	
	@keyframes mymove
	{
		from {height:0;}
		to {height:70vh;}
	}
	
	.textarea {
			width: 100%;
			height: 30vw;
			border: 1px solid #adadad;
			box-sizing: border-box;
			border-radius: 2vw;
			padding: 1vw;
			// margin: 15vw 0 0 0;
		}
	
		.imageMain {
			display: flex;
			flex-wrap: wrap;
			// margin: 2vw 0;
			padding: 30rpx;
		}
	
		.image {
			width: 22vw;
			height: 22vw;
			position: relative;
			margin: 2vw 2vw 0 0;
			border-radius: 2vw;
		}
	
		.photo {
			width: 100%;
			height: 100%;
		}
	
		.clone {
			position: absolute;
			top: 1vw;
			right: 1vw;
			width: 5vw;
			height: 5vw;
		}
	
		.imageAdd {
			width: 22vw;
			height: 22vw;
			background: #cccccc;
			margin: 2vw 0 0 0;
			text-align: center;
			line-height: 21vw;
	
		}
	
		.but {
			color: white;
			background: #0089ff;
			border-radius: 50vw;
			height: 60rpx;
			width: 120rpx;
			line-height: 60rpx;
			text-align: center;
			position: absolute;
			right: 5vw;
			bottom: 5vw;
		}
		
		.slot-content{
			padding: 0 38rpx 0 38rpx
		}
</style>
